import { useState } from "react";
import { FlipList } from "./FlipList";
import { FlipRequest } from "./FlipRequest";
import { memberInfo } from "@/popup/stores/member";

export enum FlipMode {
  HISTORY = "history",
  QUESTION = "question",
}
export const FlipInfo = ({ info }: { info: memberInfo }) => {
  const [activeMode, setActiveMode] = useState<string>("history");
  return (
    <div className="member-info-modal-tabs-wrapper-common">
      <div className="flip-info-wrapper" style={{ display: "flex" }}>
        <div style={{ width: "95px", marginRight: "4px" }}>
          <div
            style={{
              backgroundColor:
                activeMode === FlipMode.HISTORY ? "#c1d8e3" : "transparent",
            }}
            className="flip-type-info-title"
            onClick={() => setActiveMode(FlipMode.HISTORY)}
          >
            <span>翻牌历史</span>
          </div>
          <div
            style={{
              backgroundColor:
                activeMode === FlipMode.QUESTION ? "#c1d8e3" : "transparent",
            }}
            className="flip-type-info-title"
            onClick={() => setActiveMode(FlipMode.QUESTION)}
          >
            <span>翻牌提问</span>
          </div>
        </div>
        <div
          style={{ flex: 1, height: "360px", borderLeft: "1px solid #e8e8e8" }}
        >
          {activeMode === FlipMode.HISTORY && <FlipList info={info} />}
          {activeMode === FlipMode.QUESTION && <FlipRequest setActiveMode={setActiveMode} info={info} />}
        </div>
      </div>
    </div>
  );
};
